<template>
  <div
    v-empty="!productReadAuth"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-tab">
    <tab-table
      v-if="showTable && productReadAuth"
      :request-config="tabTableRequest"
      class="table-list"
      @render-ok="handleRenderOk"
      @row-click="handleTableRowClick" />

    <j-x-c-full-screen-detail
      v-if="showDetail && rowId && detailType"
      :id="rowId"
      :type="detailType"
      @update="handleRefresh"
      @close="showDetail = false" />
  </div>
</template>

<script>
import { jxcInventoryQueryRecordListAPI } from '@/api/jxc/inventory'
import TabTable from '../../../components/DetailTab/TabTable'
import { mapGetters } from 'vuex'

// 产品
export default {
  name: 'TabProductList',
  components: {
    TabTable,
    JXCFullScreenDetail: () => import('../../../components/JXCFullScreenDetail')
  },
  inheritAttrs: false,
  props: {
    batchId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    const fieldList = [
      { fieldName: 'productName', name: '产品名称' },
      { fieldName: 'spDataValue', name: '产品规格' },
      { fieldName: 'productCompany', name: '单位' },
      { fieldName: 'account', name: '账面数量' },
      { fieldName: 'actualNumber', name: '实际数量' },
      { fieldName: 'lossNumber', name: '盈亏数量' },
      { fieldName: 'inventoryRecordNumber', name: '已补录' },
      { fieldName: 'weiinventoryRecordNumber', name: '未补录' },
      { fieldName: 'remarks', name: '备注' }
    ]
    return {
      tabTableRequest: {
        fieldList: fieldList,
        listParams: {},
        listRequest: jxcInventoryQueryRecordListAPI,
        canVisitField: ['productName']
      },
      showTable: false,

      rowId: null,
      detailType: null,
      showDetail: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    productReadAuth() {
      return this.jxc && this.jxc.product && this.jxc.product.read
    }
  },
  watch: {
    batchId: {
      handler(val) {
        if (val) {
          this.showTable = false
          this.tabTableRequest.listParams = {
            batchId: val
          }
          this.$nextTick(() => {
            this.showTable = true
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleRenderOk(data) {
    },
    /**
     * 刷新
     */
    handleRefresh() {
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    },

    handleTableRowClick(row, field) {
      if (field === 'productName') {
        this.rowId = row.productId
        this.detailType = 'jxc_product'
        this.showDetail = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/detailTab";
</style>
